<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<style>
			* {
				margin: 0px;
				padding: 0px;
				background-color: #fff;
			}

			.main {
				width: 100vw;
				height: 100vh;
				background-color: #ff0000;
				position: relative;
			}

			.dot-box {
				position: absolute;
				height: 50px;
				width: 100%;
				background-color: #fff;
				margin-top: -50px;
			}

			.dot {
				width: 10px;
				height: 10px;
				border-radius: 10px;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-top: -5px;
				margin-left: -5px;
				background-color: rgba(0, 0, 0, 0.3);
			}

			.dot:last-child {
				display: none;
			}

			.dot.loading {
				display: unset;
				animation: dotloading 1.5s infinite;
			}

			@keyframes dotloading {
				0% {
					transform: translateX(-20px);
				}
				25% {
					transform: translateX(0px);
				}

				50% {
					transform: translateX(20px);
				}

				75% {
					transform: translateX(0px);
				}
				100% {
					transform: translateX(-20px);
				}
			}
		</style>

	</head>
	<body>

		<div class="main">
			<div class="dot-box">
				<div class="dot"></div>
				<div class="dot"></div>
				<div class="dot"></div>
				<div class="dot"></div>
			</div>
		</div>
		<script type="text/javascript">
			const mainDoc = document.getElementsByClassName("main")[0]
			const dot0 = document.getElementsByClassName("dot")[0]
			const dot1 = document.getElementsByClassName("dot")[1]
			const dot2 = document.getElementsByClassName("dot")[2]
			const dot3 = document.getElementsByClassName("dot")[3]

			let distance, ox, oy, x, y = 0;

			mainDoc.addEventListener("touchstart", e => {
				ox = e.touches[0].clientX;
				oy = e.touches[0].clientY;
			})
			mainDoc.addEventListener("touchmove", e => {
				distance = e.touches[0].clientY - oy;
				let precent = (100 - distance * 5) / 100
				precent = precent < 0.5 ? 0.5 : precent;
				distance *= precent;
				mainDoc.style = "transform:translateY(" + distance + "px)";

				if (distance >= 20 && distance <= 50) {
					dot0.style = "transform:translateX(" + (-distance + 20) * 2 / 3 + "px)"
					dot2.style = "transform:translateX(" + (distance - 20) * 2 / 3 + "px)"
				} else if (distance > 50) {
					dot0.style = "transform:translateX(" + (-20) + "px)"
					dot2.style = "transform:translateX(" + (20) + "px)"
				}

				console.log(distance)
				e.preventDefault() //阻止ios浏览器的回弹
			},{passive:false})
			mainDoc.addEventListener("touchend", () => {
				if (distance > 50) {
					mainDoc.style = "transition:all 0.3s;transform:translateY(" + 50 + "px)";
					dot3.className = "dot loading";
					dot0.style = "transform:translateX(" + (-20) + "px)"
					dot2.style = "transform:translateX(" + (20) + "px)"
				} else {
					dot0.style = "";
					dot2.style = "";
					mainDoc.style = "transition:all 0.3s";
					dot3.className = "dot";
				}
			})
		</script>
	</body>
</html>